<template>
    <div :class="{ drag: dragging }">
        <div class="layout-container">
            <div :class="key" v-for="(item, key) in mainData" :key="key">
                <draggable
                    v-bind="dragOptions"
                    class="list-group"
                    :list="item"
                    @end="onEnd"
                    @start="onStart"
                >
                    <transition-group name="list">
                        <div
                            class="list-group-item"
                            v-for="(element, index) in item"
                            :key="index"
                        >
                            <div class="drag-handle">{{ element.title }}</div>
                            <div class="component-box">
                                <component :is="element.name" />
                            </div>
                        </div>
                    </transition-group>
                </draggable>
            </div>
        </div>
    </div>
</template>
<script>
import draggable from "vuedraggable";
import {
    a1,
    a2,
    a3,
    a4,
    a5
} from "@/components/DragComponents";

export default {
    components: {
        draggable,
        a1,
        a2,
        a3,
        a4,
        a5
    },
    data () {
        return {
            dragging: false,
            componentList: [
                { name: "a1", title: "1", id: "1" },
                { name: "a2", title: "2", id: "2" },
                { name: "a3", title: "3", id: "3" },
                { name: "a4", title: "4", id: "4" },
                { name: "a5", title: "5", id: "5" }
            ],
            layout: {
                left: ["1", "2"],
                right: ["3", "4", "5"]
            },
            mainData: {}
        };
    },
    computed: {
        dragOptions () {
            return {
                animation: 30,
                handle: ".drag-handle",
                group: "description",
                ghostClass: "ghost",
                chosenClass: "sortable",
                forceFallback: true
            };
        }
    },
    mounted () {
        this.getLayout();
    },
    methods: {
        onStart () {
            this.dragging = true;
        },
        onEnd () {
            this.dragging = false;
            this.setLayout();
        },
        getLayout () {
            let myLayout = JSON.parse(window.localStorage.getItem("kon"));
            if (!myLayout || Object.keys(myLayout).length === 0)
                myLayout = this.layout;
            const newLayout = {};
            for (const side in myLayout) {
                newLayout[side] = myLayout[side].map(i => {
                    return this.componentList.find(c => c.id === i);
                });
            }
            this.mainData = newLayout;
        },
        setLayout () {
            const res = {};
            for (const side in this.mainData) {
                const item = this.mainData[side].map(i => i.id);
                res[side] = item;
            }
            window.localStorage.setItem("kon", JSON.stringify(res));
        }
    }
};
</script>
<style lang="scss" scoped>
.layout-container {
    height: 100%;
    display: flex;
    .left {
        flex: 1;
        margin-right: 40px;
    }
    .right {
        max-width: 550px;
        width: 550px;
    }
    .list-group-item {
        margin-bottom: 20px;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
    }
    .component-box {
        padding: 20px;
    }
    .drag-handle {
        cursor: move;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        padding: 0 20px;
        background: #6cf;
    }
}
.drag {
    .component-box {
        display: none;
    }
}

.list-enter-active {
    transition: all 0.3s linear;
}
.list-enter,
.list-leave-to {
    opacity: 0.5;
}

.sortable {
    .component-box {
        display: none;
        height: 0;
    }
}
.list-group {
    > span {
        display: block;
        min-height: 20px;
    }
}

.ghost {
    .drag-handle {
        background: rgb(129, 168, 187);
    }
}
</style>